<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yarr!</title>
    <link rel="stylesheet" href="./static/stylesheets/bootstrap.min.css">
    <link rel="stylesheet" href="./static/stylesheets/app.css">
    <link rel="icon" href="./static/graphicarts/favicon.svg" type="image/svg+xml">
    <link rel="alternate icon" href="./static/graphicarts/favicon.png" type="image/png">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        form {
            max-width: 300px;
            margin: 0 auto;
            padding: 1rem;
        }
        form img {
            width: 4rem;
            height: 4rem;
            display: block;
            margin: 3rem auto;
        }
    </style>
</head>
<body>
    <form action="" method="post">
        <img src="./static/graphicarts/anchor.svg" alt="">
        {% if .error %}
            <div class="text-danger text-center my-3">{% .error %}</div>
        {% end %}
        <div class="form-group">
            <label for="username">Username</label>
            <input name="username" class="form-control" id="username" autocomplete="off"
                   value="{% if .username %}{% .username %}{% end %}" required autofocus>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input name="password" class="form-control" id="password" type="password" required>
        </div>
        <button class="btn btn-block btn-default" type="submit">Login</button>
    </form>
</body>
</html>
